* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1a252c;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

.container .img {
    position: relative;
    width: 270px;
    height: 270px;
    transition: 0.5s;
    transform-origin: bottom center;
    -webkit-box-reflect: below 1px linear-gradient(transparent, #0002);
}

.container .img.hovered {
    transform: perspective(500px) rotateY(0deg) scale(1.5);
    z-index: 10000;
}

.container .img.prev {
    margin: 0 -20px;
    transform: perspective(500px) rotateY(45deg) scale(0.95);
}

.container .img.next {
    margin: 0 -20px;
    transform: perspective(500px) rotateY(-45deg) scale(0.95);
}